<template>
    <div class="intro-detail">
        <el-button size="small" class="goBack" type="primary" @click="goEdit">编辑</el-button>

        <div class="input-group">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医院名称</label>
                        <div class="desc">{{name}}</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医院编码</label>
                        <div class="desc">{{code}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">咨询电话</label>
                        <div class="desc">{{phone}}</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">所在地址</label>
                        <div class="desc">{{address}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">急救电话</label>
                        <div class="desc">{{emergencyCalls}}</div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content">
                        <label for="">医院邮箱</label>
                        <div class="desc">{{email}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content" >
                        <label for="">官方网址</label>
                        <!--            <el-input v-model="website" size="small"></el-input>-->
                        <div class="desc">{{website}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="" style="line-height:40px">乘车路线</label>
                        <div class="desc line-desc">{{busRoute}}</div>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <div class="grid-content">
                        <label for="" style="line-height:40px">医院介绍</label>
                        <div class="desc hospital-desc" v-html="description"></div>
                    </div>
                </el-col>
            </el-row>
<!--            <el-row :gutter="20">-->
<!--                <el-col :span="12">-->
<!--                    <div class="grid-content">-->
<!--                        <label for="">医院图标</label>-->
<!--                        <img v-if="iconUrl" :src="iconUrl" class="avatarIcon">-->
<!--                        <img v-else src="../../assets/images/weisahgnchuan.png" class="avatarIcon">-->
<!--                    </div>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                    <div class="grid-content">-->
<!--                        <label for="">医院图片</label>-->
<!--                        <img v-if="picUrl" :src="picUrl" class="avatarPic">-->
<!--                        <img v-else src="../../assets/images/weisahgnchuan.png" class="avatarPic">-->
<!--                    </div>-->
<!--                </el-col>-->
<!--            </el-row>-->
        </div>
    </div>
</template>

<script>
    import { hospitalSelect } from "../../api/hospital";

    export default {
        name: "detail",
        data() {
            return {
                name:'',
                code:'',
                phone:'',
                address:'',
                emergencyCalls:'',
                email:'',
                website:'',
                busRoute:'',
                description:'',
                iconUrl:'',
                picUrl:'',
            }
        },
        created() {
            this.getList();
        },
        mounted() {

        },

        methods: {
            goEdit() {
                this.$router.push({
                    path: "/hospitalInfo/edit",
                    query:{
                        id:this.id
                    }
                });
            },
            async getList(){
                let {list} = await hospitalSelect({
                    hi_id:sessionStorage.getItem('hospitalId'),
                    pageIndex:1,
                    pageSize:1,
                })
                this.name = list[0].hi_name;
                this.code = list[0].hi_id;
                this.phone = list[0].hi_phone;
                this.address =list[0].hi_address;
                this.emergencyCalls = list[0].hi_emergencyCalls;
                this.email = list[0].hi_email;
                this.website = list[0].hi_website;
                this.busRoute = list[0].hi_busRoute;
                this.description = list[0].hi_description;
                this.iconUrl = list[0].hi_iconUrl;
                this.picUrl = list[0].hi_picUrl;
            }
        },
    }
</script>

<style scoped lang='scss'>
    .intro-detail {
        width: 100%;
        box-sizing: border-box;
    }
    .goBack {
        margin: 0 0 10px 20px;
    }
    .input-group {
        background: #fff;
        padding: 20px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        margin: 0 20px 20px 20px;
        .el-row {
            display: flex;
            width: 100%;
            margin: 0 0 20px 0;
            .el-col,
            .el-col-12 {
                .grid-content {
                    display: flex;
                    align-content: center;
                    .desc{
                        color: #cccccc;
                        line-height: 32px;
                        &.hospital-desc{
                            margin-top: 8px;
                        }
                        &.line-desc{
                            line-height: 40px;
                        }
                    }
                    label {
                        display: inline-block;
                        flex: 0 0 80px;
                        line-height: 32px;
                        text-align: right;
                        margin-right: 10px;
                    }
                    .icon-uploader {
                        width: 80px;
                        height: 80px;
                        border: 1px dashed #ccc;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                        text-align: center;
                        .el-upload {
                            height: 80px;
                            img {
                                width: 80px;
                                height: 80px;
                            }
                        }
                    }
                    .icon-uploader:hover {
                        border: 1px dashed #409eff;
                    }
                    .icon-uploader:hover span {
                        color: #409eff;
                    }
                    span {
                        color: #ccc;
                        display: block;
                        font-size: 12px;
                        line-height: 80px;
                    }
                    .pic-uploader {
                        width: 176px;
                        height: 80px;
                        border: 1px dashed #ccc;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                        text-align: center;
                        .el-upload {
                            height: 80px;
                            span {
                                color: #ccc;
                                display: block;
                                font-size: 12px;
                                line-height: 80px;
                            }
                            img {
                                width: 176px;
                                height: 80px;
                            }
                        }
                    }
                    .pic-uploader:hover {
                        border: 1px dashed #409eff;
                    }
                    .pic-uploader:hover span {
                        color: #409eff;
                    }
                    .qr-uploader {
                        width: 120px;
                        height: 120px;
                        border: 1px dashed #ccc;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                        text-align: center;
                        .el-upload {
                            height: 120px;
                            img {
                                width: 120px;
                                height: 120px;
                            }
                        }
                    }
                    .qr-uploader:hover {
                        border: 1px dashed #409eff;
                    }
                    .qr-uploader:hover span {
                        color: #409eff;
                    }
                    .avatarIcon{
                        height: 80px;
                        width: 80px;
                    }
                    .avatarPic{
                        height: 80px;
                        width: 130px;
                    }
                    .avatarQr{
                        height: 130px;
                        width: 130px;
                    }
                }
            }
        }
        #hospitalMap {
            width: 90%;
            height: 250px;
            margin-left: 25px;
        }
    }
    .el-divider--horizontal {
        margin-top: 20px;
    }
    .btn-group {
        margin: 0 20px 20px 20px;
        text-align: left;
    }
</style>